<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
        
    }
    
    a{
        color: #000;
        list-style: none;
        text-decoration-line: none;
    }
    #list{
        overflow: hidden;
        width: calc(230px *5);
        margin: 0 auto;
    }
    #list li{
        width: 220px;
        height: 340px;
        box-sizing: border-box;
        border: 1px solid #000;
        float: left;
        margin: 0 10px 10px 0;
        padding: 10px 10px;
    }
    #list li img{
       
        width: 100%;
        height: 180px;
    }
    #list li div span {
            width: 60px;
            height: 10px;
            background-color: red;
            color: black;
        }
    #list div{
        height: 60px;
        /* 省略号 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        /* margin: 10px auto; */
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    #list .c{
        height: 20px;
    }
    #list p{
        line-height: 30px;
    }
    #list button{
        height: 30px;
        width: 100px;
        float: right;
        border-radius: 14px;
        background-color: #c53f16;
        border: rgb(220, 92, 18) solid 1px;
        color:#fff
    }
    h3{
        font-size: 15px;
    }

        #box .box1,
        #box .box2,
        #box .box3,
        #box .box4 ,
        .pagebox5{
            overflow: hidden;
            width: calc(230px * 5);
            margin: 10px auto;
            display: flex;
        }

        #box .lei,
        #box .shai,
        #box .sou,
        #box .xu ,
        .page{
            width: 150px;
        }

       

        #box .lei_child ul {
            display: flex;
            flex-wrap: wrap;
            height: 100px;
        }

        #box .lei_child ul li {
            width: 70px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin-right: 10px;
            margin-bottom: 10px;
            background-color: rgb(238, 161, 183);
            font-size: 14px;
            color: #fff;
            border-radius: 12px;
        }

        .active {
            background-color: rgb(194, 66, 98) !important;
            color: rgb(217, 176, 226);
            font-size: 18px;
        }

        #box .saleBox span,
        #box .sortBox span {
            width: 80px;
            height: 40px;
            display: inline-block;
            vertical-align: middle;
            background-color: lavender;
            text-align: center;
            line-height: 40px;
        }

       
</style>
<body>

    <div id="box">
        <div class="box1">
            <div class="lei">分类</div>
             <div class="lei_child">
                   <ul></ul>
             </div>
        </div>
       <div class="box2">
           <div class="shai">筛选</div>
           <div class="shai_child">
            <span class="shai_item" data-sale="hot">畅销</span>
            <span class="shai_item" data-sale="sale">折扣</span>
           </div>
       </div>
       <div class="box3">
        <div class="sou">搜索</div>
        <div class="sou_child">
            <input type="text" class="ipt">
        </div>
       </div>
       <div class="box4">
        <div class="xu">排序</div>
        <div class="xu_child">
            <span class="xu_item" data-method="ASC" data-type="id">综合升序</span>
                <span class="xu_item" data-method="DESC" data-type="id">综合降序</span>
                <span class="xu_item" data-method="ASC" data-type="price">价格升序</span>
                <span class="xu_item" data-method="DESC" data-type="price">价格降序</span>
                <span class="xu_item" data-method="ASC" data-type="sale">折扣升序</span>
                <span class="xu_item" data-method="DESC" data-type="sale">折扣降序</span>
        </div>
       </div>
       <div class="pagebox5">
            <div class="page">分页</div> 
            <div class="page_child">
                <input type="button" value="上一页" class="btnlast">
                <span class="ye">1/77</span>
                <input type="button" value="下一页" class="btnnext">
                <select class="select" id="select">
                    <option>12</option>
                    <option>24</option>
                    <option>32</option>
                </select>
            </div>   
    </div>
    </div>
    <ul id="list">
    
    </ul>
</body>
<script src="./axios.js"></script>
<script>
    axios.defaults.baseURL = 'http://localhost:8888'
    var oList = document.querySelector('#list')
    var oBox1 = document.querySelector('.box1 ul')
    var oBox = document.querySelector('#box')
    var oBox2 = document.querySelector('.box2 .shai_child')
    var oBox4 = document.querySelector('.box4 .xu_child')
     //分页相关
    var btnLast = document.querySelector('.btnlast')
    var btnNext = document.querySelector('.btnnext')
    var oYe = document.querySelector('.ye')
    var ISelect = document.querySelector('#select')
    var total = 0
    let obj ={
        current: 1,
        pagesize: 12,
        search: "",
        category: "",
        filter: "",
        saleType: "10",
        sortType: "id",
        sortMethod: "ASC"
    }

 
    function getGoodList(){

        axios.get('/goods/list',{
        params: obj
    }).then(res => {
        console.log(res.data.list)
        var arr = res.data.list;
        var str = '';
        arr.forEach((item, index) => {
            str += `
            <li>
                <a href="detail.html?goodsid=${item.goods_id}">
                    <div class="c">
                        ${item.is_hot ? "<span>畅销</span>":""}
                         ${item.is_sale ? "<span>折扣</span>":""}
                        </div>
                <img src= "${item.img_big_logo}"
                alt="">
                <div><h3>${item.title}</h3></div>
                <p>价格： ¥${item.price}</p>
                </a>
                <button class = 'cart' data-goodsid = ${item.goods_id}>加入购物车</button>
                </li> 
            `
        })
        console.log(str)
        oList.innerHTML = str;
        oYe.innerHTML = `${obj.current}/${res.data.total}`
        ISelect.value = obj.pagesize;
        total = res.data.total
    })

    }
    getGoodList()

    function getCateList(){
        axios.get("/goods/category").then(res => {
            console.log(res)
            var arr = res.data.list
            var str = '';
            arr.forEach(item =>{
                str += `
                <li class= "lei_child">${item}</li>
                `
            })
            oBox1.innerHTML =str
        })
    }
   getCateList()

   oBox.onclick = function (e){
    if(e.target.className == 'lei_child'){
        for(var i = 0; i < oBox1.children.length; i++){
            oBox1.children[i].classList.remove("active")
        }
        e.target.classList.add("active")
        obj.category = e.target.innerText
        getGoodList()
    }
    if(e.target.className == 'shai_item'){
        for(var i = 0; i < oBox2.children.length; i++){
            oBox2.children[i].classList.remove("active")
        }
        e.target.classList.add("active")
        obj.filter = e.target.dataset.sale;
        getGoodList()
    }

    if(e.target.className == 'xu_item'){
        for(var i = 0 ; i < oBox4.children.length; i++){
            oBox4.children[i].classList.remove("active")
        }
        e.target.classList.add("active")
        obj.sortType = e.target.dataset.type;
        obj.sortMethod = e.target.dataset.method;
        getGoodList()
    }

    if(e.target.className == 'btnnext'){
        if(obj.current >= total){return}
        obj.current++;
        getGoodList();
    }
    if(e.target.className == 'btnlast'){
        if(obj.current <= 1){return}
        obj.current--;
        getGoodList()
    }
   }

   oBox.onchange = function(e){
    if(e.target.className == 'ipt'){
        obj.search = e.target.value
        getGoodList()
    }
    if(e.target.className == 'select'){
        obj.pagesize = e.target.value
        getGoodList();
    }
   }

   oList.onclick = function(e){
    if(e.target.className == 'cart'){
        axios.post('/cart/add',{
            goodsId:e.target.dataset.goodsid,
            id:localStorage.getItem('id')
        },{
            headers:{
                "content-type":"application/x-www-form-urlencoded",
                "authorization":localStorage.getItem("token")

            }
        }).then(res =>{
            console.log(res)
            if(res.data.code != 1){
                location.href = "login.html";
                return;
            }
            alert("加入成功！");
            location.href = "cart.html"
        })
    }
   }

</script>
</html>